<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>GreyBox Redux</title>
    <script type="text/javascript" src="jquery-1.0.2.js"></script>
    <script type="text/javascript" src="greybox.js"></script>
    <link href="greybox.css" rel="stylesheet" type="text/css" media="all" />
    <!-- This CSS supports only IE 5.5 +. The conditional below
      just for the sake of brevity.
    -->
    <!--[if lt IE 7]>
    <link href="ie-hacks.css" rel="stylesheet" type="text/css" media="all" />
    <![endif]-->
    <script type="text/javascript">
      $(document).ready(function(){
        var myCallback = function() {
          alert('Callback on close');
        }

        $("a.greybox").click(function(){
          var t = $(this).title() || $(this).text() || $(this).href();
          $.GB_show($(this).href(), {
            height: 400,
            width: 400,
            animation: false,
            overlay_clickable: true,
            caption: t
          });
          return false;
        });
        $("a.greybox_no").click(function(){
          var t = $(this).title() || $(this).text() || $(this).href();
          $.GB_show($(this).href(), {
            height: 400,
            width: 400,
            animation: false,
            overlay_clickable: false,
            caption: t
          });
          return false;
        });
        $("a.greybox_ani").click(function(){
          var t = $(this).title() || $(this).text() || $(this).href();
          $.GB_show($(this).href(), {
            height: 400,
            width: 400,
            animation: true,
            overlay_clickable: true,
            caption: t
          });
          return false;
        });
        $("a.greybox_no_cb").click(function(){
          var t = $(this).title() || $(this).text() || $(this).href();
          $.GB_show($(this).href(), {
            height: 400,
            width: 400,
            animation: false,
            overlay_clickable: false,
            callback: myCallback,
            caption: t
          });
          return false;
        });
        $("a.greybox_no_cb_of").click(function(){
          var t = $(this).title() || $(this).text() || $(this).href();
          $.GB_show($(this).href(), {
            height: 400,
            width: 400,
            animation: false,
            overlay_clickable: false,
            overflow: "hidden",
            callback: myCallback,
            caption: t
          });
          return false;
        });
      });
    </script>
</head>
<body>
<h1>Greybox Redux (Reworked)</h1>

<p>Reworked original greybox redux at
<a href="http://jquery.com/demo/grey/">http://jquery.com/demo/grey/</a></p>

<h2 id="headline">See it in action:</h2>
<ul>
  <li><a href="http://google.com/" title="Google" class="greybox_no">Launch Google</a> (Overlay not clickable)</li>
  <li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a> (Overlay clickable)</li>
  <li><a href="http://msn.com/" class="greybox_ani">Microsoft would like a visit.</a> (overlay clickable, animated)</li>
  <li><a href="http://jquery.com/" class="greybox_no_cb">jQuery Rocks!</a> (Overlay not-clickable, callback alert)</li>
  <li><a href="http://jquery.com/" class="greybox_no_cb_of">jQuery Rocks!</a> (Overlay not-clickable, callback alert, firefox only: greybox overflow set to hidden)</li>
</ul>
</body>
</html>
